<template>
	
	<div style="height: 600px; display: flex;">
		
		<div style="height: 600px; width: 100%; font-size: 18px; ">
			
		<div style="margin:auto; display: flex; justify-content: space-around;">
			<a style="font-size: 2pc;">课程显示</a>
			<button v-on:click="go2add()">添加课程</button>
			
			
			
			
			<dialog id="inputwin" :open="bShow">
			<hr />
			<table align="center">
		  <tr>
			  <td>课程编号</td>
			  <td><input type="text" v-model="formObj.cno" v-bind:readonly="actidx==0" /></td>
		  </tr>
		  
		  <tr>
			<td>课程名称</td>
			<td><input type="text" v-model="formObj.cname" /></td>
		  </tr>
	  </table>
	  <hr />
	  <div style="display: flex; justify-content: space-between;">
		  <p>&nbsp;</p> 
		   <p><button v-on:click="save()">确定</button></p>
		  <p> <button v-on:click="bShow=false;">取消</button></p>
		
		  <p>&nbsp;</p>
				</div>
			</dialog>
			
			
			

		</div>
		
		<table align="center" border="1" style="width: 100%; border: 1px solid skyblue;">
			
			<tr>
				<th align="center">课程id</th>
				<th align="center">课程名称</th>
				<th colspan="2" align="center">功能</th>
			</tr>
	
			<tr v-for="(c,idx) in courses">
					<td align="center">{{c.cno}}</td>
					<td align="center">{{c.cname}}</td>
					<td align="center"><button v-on:click="gotUpdate(c)">修改</button> </td>
					<td align="center"> <button v-on:click="del(c.cno)">删除</button></td>
			</tr>
		</table>
	</div>
	
	</div>
	
</template>

<script>
	import axios from 'axios';
	export default{
		
		name:'Course',
		
		data(){
			return{
				formObj:{},
				courses:[],
				bShow:false,
				actmsg:['修改','添加','显示'],
				actidx:2 
			}
		},
		methods:{
			go2add(){
					this.actidx = 1;
					this.formObj = {};
					this.bShow = true;
				console.log(this.formObj)
				
			},
			
			gotUpdate(c){
			  var that=this;
						this.actidx=0; 
						this.bShow=true;
						this.$axios.get(`${this.$ip}/api/adm/course/findOne/${c.cno}`,{
						headers:{
							'Authorization':'Bearer '+ window.localStorage.getItem("token")
							}
							}).then(function(resp){
							that.formObj=resp.data.data;
							console.log(that.formObj);
						})
			},
			
			
			
			
			
			del(c){
				console.log(c);
				console.log(this.$ip)
				
				var that=this;
				 const token=window.localStorage.getItem("token")
				 
				this.$axios.get(`${this.$ip}/api/adm/course/del?cno=`+c,
				{
					headers:{'Authorization':'Bearer '+token}
				}).then(function(resp){
					
					that.courses=resp.data.data
				
				})
			},
			
			save(){
						  var that=this;
						  let url="/api/adm/course/add"
						  if(this.actidx==0){
							  url="/api/adm/course/update"
						  }
						  console.log(url)
						  console.log(that.formObj)
						   var fd=new FormData();
						   
		
						  this.$axios.post(
						  `${this.$ip}`+url,
						  that.formObj,
						  { headers:{
						  	'Authorization':'Bearer '+ window.localStorage.getItem("token")
						  	}
							}).then(function(resp){
							   that.bShow = false;
							   console.log(resp.data);
							   that.courses = resp.data.data;
							  
						  })
			}
			
		},
		mounted(){
			let token = window.localStorage.getItem("token")
			var than=this;
			console.log(token)
			console.log("-----")
			
			this.$axios.get(this.$ip + "/api/adm/course/findAll",
			
			{
				headers:{'Authorization':'Bearer '+token}
			}).then(function(resp){
				console.log(resp.data.data)
				
				than.courses = resp.data.data;
			})
		}
	}
	
</script>


<style scoped="scoped">
	#inputwin {
		    border: 5px solid #2C3E50;
			position:absolute; 
			
			/* position:relative;   /* 相对定位*/ 
			text-align: center;  
			z-index: 900;
			width: 40%;
			    line-height: 50px;
			min-height: 15vw;
			
			transform:translateY(50%);
			
			left: 40%; 
			top:  1vw;
			opacity: 0.9!important;
			background-color: skyblue;
			color:#2C3E50;
			box-shadow: 3px 3px 3px #aaa;
	}
	#inputwin input {
		line-height: 27px;
		border-radius: 8px;
		width: 80%;
	}
</style>
